<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>添加优惠券</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 组件样式 -->
  <link rel="stylesheet" href="../../../../component/elementUI/index.css">
  <link rel="stylesheet" href="../../../../style/index.css">
</head>

<!-- 代码结构 -->

<body>
  <div id="app" class="minWidth">
    <el-form :model="form" ref="contract" :rules="rules" inline-message="true" style="width: 100%">
      <div class="table_titel">
        <div class="titel">优惠券方案</div>
      </div>
      <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="优惠券名称">
          <el-input v-model.trim="form.Coupon_Scheme_Name" placeholder="请输入优惠券名称"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="名称备注">
          <el-input v-model.trim="form.Expiration_Date" placeholder="请输入名称备注"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="优惠券规则">
          <el-select v-model="form.Coupon_Scheme_Rule" placeholder="请选择优惠券规则" clearable>
            <el-option label="满减" value="0"></el-option>
            <el-option label="折扣" value="1"></el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="优惠券领取方式">
          <el-form-item prop="Coupon_Scheme_Type">
            <el-select ref="getColumn" v-model.trim="form.Coupon_Scheme_Type" placeholder="请选择优惠券领取方式" filterable
              style="width: 100%">
              <el-option-group>
                <el-option v-for="item in Coupon_Scheme_Type_options" :label="item.label" :value="item.value"
                  :key="item.value"></el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="开始时间">
          <el-form-item prop="Start_Date">
            <el-date-picker v-model.trim="form.Start_Date" type="datetime" placeholder="请选择开始时间"
              value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="结束时间">
          <el-form-item prop="End_Date">
            <el-date-picker v-model.trim="form.End_Date" type="datetime" placeholder="请选择结束时间"
              value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="领取次数限制">
          <el-input v-model.trim="form.Quantity_Restrictions" placeholder="请输入领取次数限制"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="用户限制">
          <el-input v-model.trim="form.Customer_Restrictions" placeholder="请输入用户限制"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="发放数量">
          <el-input v-model.trim="form.Total_Quantity" placeholder="请输入优惠券发放数量"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="剩余数量">
          <el-input v-model.trim="form.Surplus_Quantity" placeholder="请输入剩余数量"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="已领取数量">
          <el-input v-model.trim="form.Receive_Quantity" placeholder="请输入已领取数量"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="已使用数量">
          <el-input v-model.trim="form.Apply_Quantity" placeholder="请输入已使用数量"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="生效时间">
          <el-input v-model.trim="form.Take_Effect" placeholder="请输入生效时间"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="有效期">
          <el-input v-model.trim="form.Expiration_Date" placeholder="请输入有效期"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="最低销售额">
          <el-input v-model.trim="form.Min_Amount" placeholder="请输入最低销售额"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="优惠折扣/减免">
          <el-input v-model.trim="form.Preferential" placeholder="请输入优惠折扣/减免"></el-input>
        </el-descriptions-item>
      </el-descriptions>

      <div class="table_titel">
        <div class="titel">适用商品信息</div>
        <div class="operation">
          <el-button type="primary" size="small" @click="add_sales_unitprice_detail">新增</el-button>
          <el-button type="danger" size="small" @click="remove_sales_unitprice_detail">删除</el-button>
        </div>
      </div>
      <el-form :inline="true" :form="form">
        <el-form-item label="商品名称">
          <el-input v-model="form.Article_Name" placeholder="请输入商品名称" @keyup.enter="onSerach" />
        </el-form-item>
        <el-form-item label="品牌">
          <!-- <el-input v-model="brand" placeholder="请输入商品品牌" @keyup.enter="onSerach" /> -->
          <el-select placeholder="请选择商品品牌" @keyup.enter="onSerach" clearable filterable v-model.trim="formData.Brand_SerialNumber">
            <el-option v-for="(item,index) in brand" :key="index" :label="item.Brand_Name" :value="item.Brand_SerialNumber"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类别">
          <el-select placeholder="请选择商品类别" @keyup.enter="onSerach" clearable filterable v-model.trim="formData.Category_SerialNumber">
            <el-option v-for="(item,index) in category" :key="index" :label="item.Category_Name" :value="item.Category_SerialNumber"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSerach">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" id="out-table" stripe border height="calc(100vh - 140px)" style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" @selection-change="handleSelectionChange">

        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column  prop="Article_Name" label="商品名称"></el-table-column>
        <el-table-column align="center" label="商品图片" width="125">
          <template v-slot="{row}">
            <div v-if="row.Picture_URL != '/'">
              <el-image @click="seeDetail(1,row)" v-if="row.Picture_URL!=void 0" style="width: 100px; height: 100px; border-radius: 9px;cursor: pointer;" fit="cover"
              @click="handlePreview(row.Article_SerialNumber)" :src="DomainIMG + row.Picture_URL"
              :preview-src-list="Pic"></el-image>
            </div>
            <div v-else>
              暂无封面
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="Brand_Name" label="品牌"></el-table-column>
        <el-table-column align="center" prop="Category_Name" label="类别"></el-table-column>
      </el-table>
      <el-pagination background v-show="total > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="form.page" :page-sizes="[10, 20, 30, 50]" :page-size="form.limit"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
      <div style="margin-bottom: 100px;">
        <div class="table_titel">
          <div class="titel">适用店铺</div>
          <div class="operation">
            <el-button type="primary" size="small" @click="add_sales_unitprice_storescope">新增</el-button>
            <el-button type="danger" size="small" @click="remove_sales_unitprice_storescope">删除</el-button>
          </div>
        </div>
        <el-descriptions :column="2" :rules="rules" border size="small"
          v-for="(item,index) in form.Children.coupon_scheme_storescope" :key="index">
          <el-descriptions-item label="门店流水号">
            <el-form-item prop="Store_SerialNumber">
              <el-select v-model.trim="item.Store_SerialNumber" placeholder="请选择店铺" filterable style="width: 100%">
                <el-option v-for="(item,index) in store" :key="index" :label="item.Store_Name"
                  :value="item.Store_SerialNumber"></el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <el-form-item class="form-operation">
        <el-button @click="window.history.back()">返回</el-button>
        <el-button type="success" @click="onExcel">导入</el-button>
        <el-button type="primary" :loading="loading" @click="submitForm('contract')">提交</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="导入表格" width="70%" :visible.sync="dialogVisible">
      <el-date-picker v-model.trim="Start_Date" type="datetime" placeholder="请选择开始时间"
        value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      <el-date-picker v-model.trim="End_Date" type="datetime" placeholder="请选择结束时间"
        value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      <el-select multiple v-model.trim="Store_SerialNumber" placeholder="请选择店铺" filterable style="width: 50%">
        <el-option v-for="(item,index) in store" :key="index" :label="item.Store_Name"
          :value="item.Store_SerialNumber"></el-option>
      </el-select>
      <el-select multiple v-model.trim="ShopColumn_Id" placeholder="请选择栏目" filterable style="width: 100%">
        <el-option-group v-for="(group,index) in column" :key="index" :label="group.label">
          <el-option v-for="(item,index) in group.options" :key="index" :label="item.name"
            :value="item.ShopColumn_Id"></el-option>
        </el-option-group>
      </el-select>
      <div style="height: 50px;">
        <el-upload id="Excel" class="upload-demo" action="" :before-remove="beforeRemove" :file-list="fileList"
          :before-upload="uploadDetails">
          <el-button size="small" type="primary" v-show="fileList.length<1">导入</el-button>
          <span slot="tip" class="el-upload__tip" v-show="fileList.length<1">请上传xlsx表格</span>
        </el-upload>
      </div>
      <div style="margin-bottom: 20px;">
        <el-table :data="tableData" id="out-table" stripe border height="calc(60vh - 140px)" style="width: 100%"
          :cell-style="tableCellStyle">
          <el-table-column label="序号" width="50" type="index"></el-table-column>
          <el-table-column prop="Article_SerialNumber" label="商品名称"></el-table-column>
          <el-table-column prop="Article_Specifications_SerialNumber" label="规格"></el-table-column>
          <el-table-column prop="Unit_Price" label="原售价"></el-table-column>
          <el-table-column prop="Sales_Unit_Price" label="现售价">
            <template v-slot="{row}">
              <span :style="row.Sales_Unit_Price>0?'':'color:red'">{{row.Sales_Unit_Price}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Sign" label="有/无货货主"></el-table-column>
          <el-table-column prop="Distribute" label="上架数量">
            <template v-slot="{row}">
              <span :style="row.Distribute>0?'':'color:red'">{{row.Distribute}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="操作" width="80">
            <template v-slot="{row}">
              <el-button size="small" type="danger" @click="Filter(1,row)">删除</el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <div style="display: flex; justify-content: center; width: 100%;">
        <el-button type="danger" @click="Filter(2)">筛掉异常数据</el-button>
        <el-button type="primary" :loading="loading" @click="submitForm1">提交</el-button>
      </div>
    </el-dialog>
  </div>
  <!-- 依赖脚本 -->
  <script type="text/javascript" src="../../../../utils/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="../../../../utils/jquery.cookie.js"></script>
  <script type="text/javascript" src="../../../../utils/vue.min.js"></script>
  <script type="text/javascript" src="../../../../component/elementUI/index.js"></script>
  <script type="text/javascript" src="../../../../utils/utils.js"></script>
  <script type="text/javascript" src="../../../../utils/ID_Validity.js"></script>
  <script type="text/javascript" src="../../../../utils/FileSaver.min.js"></script>
  <script type="text/javascript" src="../../../../utils/FileSaver.js"></script>
  <script type="text/javascript" src="../../../../utils/xlsx.full.min.js"></script>
  <script type="text/javascript" src="./js/Edit.js"></script>
</body>

</html>